/**
* 左边菜单
*/ 
<template>
  <el-menu
    :collapse="collapsed"
    collapse-transition
    router
    :default-active="routerUrl !==''?routerUrl:$route.path"
    unique-opened
    class="el-menu-vertical-demo"
    background-color="rgba(25, 26, 35, 1)"
    text-color="#fff"
  >
    <div class="logobox">
      <div><img class="logoimg" src="../assets/img/logo.png" alt="" /></div>
      <div class="logo_text"><span>群思网络</span></div>
    </div>
    <div
      v-for="menu in allmenu"
      :key="menu.menuid"
      :index="menu.menuname"
      style="text-align: center; margin-right: 10px"
    >
      <!-- 一级导航列 -->
      <el-menu-item v-if="menu.menus === null" :index="'/' + menu.url">
        <img class="menuimg" :src="menu.imgurl" alt="" width="20" />
        <!-- <i class="iconfont" :class="menu.icon"></i> -->
        <span slot="title">{{ menu.menuname }}</span>
      </el-menu-item>
      <!-- 存在的二级导航列 -->
      <el-submenu v-else :index="menu.menuname">
        <template slot="title">
          <img class="menuimg" :src="menu.imgurl" alt="" width="20" />
          <!-- <i class="iconfont" :class="menu.icon"></i> -->
          <span>{{ menu.menuname }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="chmenu in menu.menus"
            :index="'/' + chmenu.url"
            :key="chmenu.menuid"
          >
            <span>{{ chmenu.menuname }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </div>
  </el-menu>
</template>
<script>
export default {
  name: "leftnav",
  data() {
    return {
      collapsed: false,
      allmenu: [],
      routerUrl:"",
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 为防止页面刷新菜单高光失效-初始化路由获取高光
    this.routerUrl = this.$route.path.replace("add","index");
    let that = this;
    // 获取图形验证码
    let res = {
      success: true,
      data: [
        {
          menuid: 60,
          icon: "icon-xitongshezhi",
          menuname: "系统管理",
          imgurl: require("../assets/img/system.png"),
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 61,
              icon: "icon-provider-manage",
              menuname: "基本设置",
              imgurl: "",
              hasThird: "N",
              url: "system_management/Administrators",
              menus: null,
            },
            {
              menuid: 62,
              icon: "icon-provider-manage",
              menuname: "管理员",
              imgurl: "",
              hasThird: "N",
              url: "system_management/BasicSettings",
              menus: null,
            },
          ],
        },
        {
          menuid: 70,
          icon: "icon-shouyelunbotu",
          menuname: "轮播管理",
          imgurl: require("../assets/img/rotation.png"),
          hasThird: "N",
          url: "rotation/index",
          menus: null,
        },
        {
          menuid: 80,
          icon: "icon-shouyelunbotu",
          menuname: "栏目管理",
          imgurl: require("../assets/img/column.png"),
          hasThird: "N",
          url: "column/index",
          menus: null,
        },
        {
          menuid: 90,
          icon: "icon-liuyan",
          menuname: "留言面板",
          imgurl: require("../assets/img/language.png"),
          hasThird: "N",
          url: "reply_panel/index",
          menus: null,
        },
        {
          menuid: 100,
          icon: "icon-lianjie",
          menuname: "友情链接",
          imgurl: require("../assets/img/link.png"),
          hasThird: "N",
          url: "links/index",
          menus: null,
        },
        {
          menuid: 110,
          icon: "icon-lianjie",
          menuname: "文章管理",
          imgurl: require("../assets/img/article.png"),
          hasThird: "N",
          url: "article/index",
          menus: null,
        },
        {
          menuid: 120,
          icon: "icon-lianjie",
          menuname: "商品管理",
          imgurl: require("../assets/img/commodity.png"),
          hasThird: "N",
          url: "commodity/index",
          menus: null,
        },
      ],
      msg: "success",
    };
    this.allmenu = res.data;
    // 监听
    this.$root.Bus.$on("toggle", (value) => {
      this.collapsed = !value;
    });
  },
  methods: {
    activeMenu() {
      let route = this.$route;
      let path = "";
      path = route.meta.menuPath ? route.meta.menuPath : route.path;
      return path;
    },
  },
};
</script>
<style scoped>
.menuimg {
  margin-right: 10px;
}
/deep/ .el-submenu > .el-submenu__title {
  padding-left: 0px !important;
}
/* 二级鼠标经过 */
/deep/ .el-submenu > .el-submenu__title {
  color: #fff;
  font-size: 15px;
  height: 50px;
  line-height: 50px;
  padding-left: 20px !important;
} /*二级导航默认*/
#navs {
  padding: 0 !important;
  width: 100%;
}
/deep/.el-menu-vertical-demo {
  /* background-color: #031a3d; */
  background-color: rgba(25, 26, 35, 1);
}

.el-menu-vertical-demo {
  box-sizing: border-box;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
/deep/ .el-submenu__title:hover {
  background-color: #021532;
}
/deep/ .el-menu-item-group__title {
  padding: 0px;
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu {
  border: none;
}
.logobox {
  text-align: center;
  margin-top: 1rem;
}
.logobox img {
  height: auto;
  max-height: 50%;
  margin: 1rem 0 0 0;
}
.logo_text {
  font-weight: bolder;
  color: #ffff;
  margin-bottom: 50px;
}
.el-menu-item.is-active {
  background-color: #3370ff !important;
  color: #fff;
  span {
    color: #fff !important;
  }
}
</style>
